<template>
  <back-dialog-base
    :title="title"
    :visible="visibleViewDialog"
    width="25rem"
    :hasFooter="false"
  >
    <template #content>
      <div class="content-warp">
        <div class="left-form">
          <div class="row">
            <span class="label">灯杆编号:</span>
            <span>{{ rowData.lampPostCode }}</span>
          </div>
          <div class="row">
            <span class="label">灯杆名称:</span>
            <span>{{ rowData.lampPostName }}</span>
          </div>
          <div class="row">
            <span class="label">设备类型:</span>
            <span>{{ rowData.deviceType }}</span>
          </div>
          <div class="row">
            <span class="label">规格型号:</span>
            <span>{{ rowData.specType }}</span>
          </div>
          <div class="row">
            <span class="label">所属区域:</span>
            <span>{{ rowData.region }}</span>
          </div>
          <div class="row">
            <span class="label">灯杆位置:</span>
            <span>{{ rowData.locationInfo }}</span>
          </div>
          <div class="row">
            <span class="label">经度:</span><span>{{ rowData.longitude }}</span>
          </div>
          <div class="row">
            <span class="label">纬度:</span><span>{{ rowData.latitude }}</span>
          </div>
          <div class="row">
            <span class="label">安装时间:</span>
            <span>{{ rowData.installTime }}</span>
          </div>
          <div class="row">
            <span class="label">灯杆厂商:</span>
            <span>{{ rowData.lampPostFirm }}</span>
          </div>
          <div class="row">
            <span class="label">管理部门:</span>
            <span>{{ rowData.manageDepartment }}</span>
          </div>
          <div class="row">
            <span class="label">施工单位:</span>
            <span>{{ rowData.constructUnit }}</span>
          </div>
          <div class="row">
            <span class="label">备注:</span><span>{{ rowData.remarks }}</span>
          </div>
        </div>
        <div class="right-form">
          <div class="item-form">
            <div class="title">
              <i class="line-tag"></i>
              <span>灯具</span>
            </div>
            <div class="form-content">
              <div class="btns-row">
                <div class="tags" v-show="tagsLamp.length > 0">
                  <el-tag
                    v-for="tag in tagsLamp"
                    :key="tag.index"
                    class="mx-1"
                    type="warning"
                    @click="handleTagChange(tag, 'lamp')"
                  >
                    {{ tag.name }}
                  </el-tag>
                </div>
              </div>
              <div class="form-card">
                <div class="row">
                  <span class="label">灯具编号:</span>
                  <span>{{ lamp.lampCode }}</span>
                </div>
                <div class="row">
                  <span class="label">灯具名称:</span>
                  <span>{{ lamp.lampName }}</span>
                </div>
                <div class="row">
                  <span class="label">灯具型号:</span>
                  <span>{{ lamp.specType }}</span>
                </div>
                <div class="row">
                  <span class="label">UID:</span>
                  <span>{{ lamp.uid }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="item-form">
            <div class="title">
              <i class="line-tag"></i>
              <span>摄像头</span>
            </div>
            <div class="form-content">
              <div class="btns-row">
                <div class="tags" v-if="tagsCamera.length > 0">
                  <el-tag
                    v-for="tag in tagsCamera"
                    :key="tag.index"
                    class="mx-1"
                    type="warning"
                    @click="handleTagChange(tag, 'camera')"
                  >
                    {{ tag.name }}
                  </el-tag>
                </div>
              </div>
              <div class="form-card">
                <div class="row">
                  <span class="label">摄像头编号:</span>
                  <span>{{ camera.cameraCode }}</span>
                </div>
                <div class="row">
                  <span class="label">摄像头名称:</span>
                  <span>{{ camera.cameraName }}</span>
                </div>
                <div class="row">
                  <span class="label">灯具型号:</span>
                  <span>{{ camera.specType }}</span>
                </div>
                <div class="row">
                  <span class="label">UID:</span>
                  <span>{{ camera.uid }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="item-form">
            <div class="title">
              <i class="line-tag"></i>
              <span>发布屏</span>
            </div>
            <div class="form-content">
              <div class="btns-row">
                <div class="tags" v-if="tagsScreen.length > 0">
                  <el-tag
                    v-for="tag in tagsScreen"
                    :key="tag.index"
                    class="mx-1"
                    type="warning"
                    @click="handleTagChange(tag, 'screen')"
                  >
                    {{ tag.name }}
                  </el-tag>
                </div>
              </div>
              <div class="form-card">
                <div class="row">
                  <span class="label">发布屏编号:</span>
                  <span>{{ screen && screen.screenCode }}</span>
                </div>
                <div class="row">
                  <span class="label">发布屏名称:</span>
                  <span>{{ screen && screen.screenName }}</span>
                </div>
                <div class="row">
                  <span class="label">灯具型号:</span>
                  <span>{{ screen && screen.specType }}</span>
                </div>
                <div class="row">
                  <span class="label">UID:</span>
                  <span>{{ screen && screen.uid }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { defineProps, watch, ref } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { getLampPostById } from '@/api/back'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleViewDialog: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
})
const lampList = ref([])
const lamp = ref({})
const tagsLamp = ref([])
const cameraList = ref([])
const camera = ref({})
const tagsCamera = ref([])
const screenList = ref([])
const screen = ref({})
const tagsScreen = ref([])

const getlamp = async (id) => {
  const res = await getLampPostById({ id })
  return res
}

const handleTagChange = (tag, type) => {
  console.log(tag, type)
  // switch (type) {
  //   case 'lamp':
  //     lamp.value = lampList.value.find((e) => e.id === tag.index)
  //     break
  //   case 'camera':
  //     camera.value = cameraList.value.find((e) => e.id === tag.index)
  //     break
  //   case 'screen':
  //     screen.value = screenList.value.find((e) => e.id === tag.index)
  //     break

  //   default:
  //     break
  // }
}
watch(
  () => props.rowData,
  () => {
    if (props.rowData.id) {
      const resdata = getlamp(props.rowData.id)
      resdata.then((res) => {
        if (res.lampForms) {
          lampList.value = res.lampForms
          lamp.value = res.lampForms[0]
          res.lampForms.forEach((e) => {
            tagsLamp.value.push({ name: e.lampName, index: e.id })
          })
        }
        if (res.cameraForms) {
          cameraList.value = res.cameraForms
          camera.value = res.cameraForms[0]
          res.cameraForms.forEach((e) => {
            tagsCamera.value.push({ name: e.cameraName, index: e.id })
          })
        }
        if (res.screenForms) {
          screenList.value = res.screenForms
          screen.value = res.screenForms[0]
          res.screenForms.forEach((e) => {
            tagsScreen.value.push({ name: e.screenName, index: e.id })
          })
        }
      })
    }
  }
)
</script>

<style lang="scss" scoped>
.content-warp {
  width: 100%;
  height: 100%;
  display: flex;
  .left-form {
    flex: 4;
  }
  .right-form {
    flex: 6;
    height: 780px;
    overflow: auto;
    padding-left: 60px;
    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #d6d6d680;
      border-radius: 20px;
    }
    .item-form {
      width: 100%;
      display: flex;
      margin-bottom: 30px;
      .title {
        width: 80px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        line-height: 19px;
        color: #333333;
        display: flex;
        .line-tag {
          width: 4px;
          height: 14px;
          background: #ff9502;
          border-radius: 4px;
          margin-right: 5px;
        }
      }
      .form-content {
        width: calc(100% - 120px);
        display: flex;
        flex-direction: column;
        .btns-row {
          width: 100%;
          height: 35px;
          display: flex;
          position: relative;
          margin-bottom: 6px;
          .tags {
            width: calc(100% - 5px);
            display: flex;
            column-gap: 4px;
            overflow-x: auto;
            cursor: pointer;
            &::-webkit-scrollbar-track-piece {
              background: #d3dce6;
            }

            &::-webkit-scrollbar {
              width: 3px;
              height: 3px;
            }

            &::-webkit-scrollbar-thumb {
              background: #ff9502;
              border-radius: 20px;
            }
          }
        }
        .form-card {
          width: 100%;
          border: 1px solid #d3dbe5;
          border-radius: 4px;
          padding: 20px;
        }
      }
    }
  }
}
.row {
  width: 100%;
  display: flex;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 19px;
  color: #5d6c8e;
  margin-bottom: 24px;
  .label {
    width: 100px;
  }
}
</style>
